<template>
  <div class="menu">
    <el-menu v-if="has_child" :default-active="activeIndex" mode="horizontal" :ellipsis="false">
      <menuItem :options="options">
      </menuItem>
    </el-menu>
    <el-menu v-else :default-active="activeIndex" mode="horizontal" :ellipsis="false"
      @select="(key: string) => onSelect(key)">
      <template v-for="(item, index) in options" :key="index">
        <el-menu-item :index="item.id + ''" v-if="item.type !== MENUTYPE.按钮">
          <template v-if="item.icon">
            <el-icon v-if="iconsnames.includes(item.icon)" :size="24" style="margin-right: 6px">
              <component :is="(ElementPlusIconsVue as any)[item.icon]" />
            </el-icon>
            <ElAvatar v-else :size="24" :src="item.icon || defaultAvatar" style="margin-right: 6px" alt="" />
          </template>
          {{ item.name }}
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { pagebuttonStore } from "@b/store";
import { ElMenu, ElMenuItem, ElIcon, ElAvatar } from "element-plus";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import defaultAvatar from "@/assets/OIP-C.jpg?url";
import menuItem from "../privately/menu_item.vue";
import { MENUTYPE } from "@b/model/enum"

interface prop {
  options: interfaceMenu[];
  activeIndex: string;
  has_child: boolean;
}
const spagebuttonStore = pagebuttonStore();
const iconsnames = Object.keys(ElementPlusIconsVue);
const { options = [], has_child = false } = defineProps<prop>();
const emits = defineEmits<{
  (e: "select", key: string): void;
}>();
const onSelect = (key: string) => {
  spagebuttonStore.headActive = Number(key);
  emits("select", key);
};
</script>

<style scoped>
.menu {
  overflow: hidden;
}
</style>
